<template>
	<view class="container">
		<mescroll-body @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
			<view class="header common-header">
				<text selectable>当前渠道：{{ channelName }}</text>
				<text selectable>渠道Id:{{ channelId }}</text>
			</view>
			<view class="logs">
				<view class="log-item" v-for="(item, index) in logs" :key="index">
					<text selectable>{{ item.channelName }}</text>
					<text selectable>{{ item.id }}</text>
					<view class="btn" @tap="change(item.id)">切换</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollBody from 'mescroll-uni/mescroll-body.vue';
import MescrollMixin from 'mescroll-uni/mescroll-mixins.js';
import MescrollEmpty from 'mescroll-uni/components/mescroll-empty.vue';
import { mapMutations } from 'vuex';
export default {
	mixins: [MescrollMixin],
	components: { MescrollBody, MescrollEmpty },
	data() {
		return {
			channelName: '',
			channelId: '',
			logs: [],
			downOption: {
				use: true, // 是否启用下拉刷新; 默认true,
				auto: false,
				native: true
			},
			//上拉加载的常用配置
			upOption: {
				use: true, // 是否启用上拉加载; 默认true
				auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 2, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: false,
				textNoMore: '---没有了---'
			}
		};
	},
	onLoad() {
		this.bindList().then(() => {
			// #ifdef H5
			this.$wechat.hideMenu();
			// #endif
		});
	},
	methods: {
		...mapMutations('user', ['logout']),
		async bindList() {
			var result = await this.$http.request({
				url: 'api/ChannelApi/GetChangeChannel',
				data: {
					SkipCount: this.logs.length,
					MaxResultCount: 30
				}
			});
			this.channelName = result.currentChannelName;
			this.channelId = result.currentChannelId;
			this.logs = this.logs.concat(result.channelList);
			return result.channelList.length;
		},
		downCallback() {
			this.logs = [];
			this.bindList()
				.then(() => {
					this.mescroll.endSuccess();
				})
				.catch(() => {
					this.mescroll.endErr();
				});
		},
		async upCallback(page) {
			try {
				var Count = await this.bindList();
				this.mescroll.endSuccess(Count, Count > 0);
			} catch (e) {
				// 失败隐藏下拉加载状态
				this.mescroll.endErr();
			}
		},
		change(id) {
			this.$http
				.request({
					url: 'api/ChannelApi/PostChangeChannel',
					method: 'POST',
					data: {
						Id: id
					}
				})
				.then(() => {
					this.logout();
					uni.switchTab({
						url: '../index/index',
						success() {
							var page = getCurrentPages().pop();
							if (page) {
								page.onLoad();
							}
						}
					});
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.header {
	display: flex;
	flex-direction: column;
	font-size: 30rpx;
	align-items: center;
}
.logs {
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	.log-item {
		display: flex;
		flex-direction: column;
		padding: 10rpx;
		border-bottom: 1px solid #dddddd;
		padding: 20rpx 0;
		.btn {
			align-self: flex-end;
			background: $uni-color-main-dark;
			height: 60rpx;
			width: 100rpx;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 10rpx;
		}
	}
}
</style>
